<template>
	<view class="musicHead"  :style="{color:color}">
		<view v-if="icon" :class="iconblack?'musicHeadIconBlack':'musicHeadIcon'">
			<text class="iconfont iconzuojiantou-copy" @tap="handleToBack" />|<text class="iconfont iconshouye" @tap="handleToHome"/>
		</view>
		{{title}}
	</view>
</template>

<script setup lang="ts">
	
defineProps({
  title:String,
  icon:Boolean,
  color:String,
  iconblack:Boolean
})

const handleToBack = () =>{
	uni.navigateBack()
}
const handleToHome = () =>{
	uni.navigateTo({
		url:'/pages/index/index'
	})
}

</script>

<style scoped lang="scss">
.musicHead{
	position: relative;
	margin-top: -6rpx;
	width: 100%;
	height: 75px;
	font-size: 16px;
	line-height: 80px;
	text-align: center;
	color: black;
	z-index: 999;
	.musicHeadIcon{
		position: absolute;
		display: flex;
		justify-content: space-evenly;
		left: 8px;
		top: 26px;
		width: 90px;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.3);
		color: white;
		line-height: 28px;
		border-radius: 15px;
		text:first-child{
			line-height: 31px;
		}
	}
}

.musicHeadIconBlack{
	position: absolute;
	display: flex;
	justify-content: space-evenly;
	left: 8px;
	top: 26px;
	width: 90px;
	height: 30px;
	background-color: white;
	color: black;
	line-height: 28px;
	border-radius: 15px;
	border: 1px solid #eaeaea;
		text:first-child{
			line-height: 31px;
		}
}
</style>